<template>
  <div class="field-config-container-wrap" ref="container">
    <div v-show="isControl" class="arrow left-arrow" @click="moveLeft">
      <i class="iconfont icon-jiantou5"></i>
    </div>

    <div :class="['field-config-content-wrap', isControl ? 'half' : 'full']" ref="scrollEl">
      <slot></slot>
    </div>

    <div v-show="isControl" class="arrow right-arrow" @click="moveRight">
      <i class="iconfont icon-jiantou5"></i>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'FieldConfigContainer',
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      isControl: false
    }
  },
  watch: {
    'list': function () {
      this.handleControl()
    },
    'windowResize': function () {
      console.log('窗口变化')
      this.handleControl()
    }
  },
  computed: {
    ...mapGetters(['windowResize'])
  },
  methods: {
    handleControl() {
      this.$nextTick(() => {
        const scrollElWidth = this.$refs.scrollEl.scrollWidth
        const containerWidth = this.$refs.container.getBoundingClientRect().width

        // console.log('scrollElWidth: ', scrollElWidth)
        // console.log('containerWidth: ', containerWidth)

        this.isControl = Math.floor(scrollElWidth) > Math.ceil(containerWidth)
      })
    },
    moveLeft() {
      this.setScrollPosition(-100)
    },
    moveRight() {
      this.setScrollPosition(100)
    },
    setScrollPosition(p) {
      const scrollEl = this.$refs.scrollEl
      let scrollLeft = scrollEl.scrollLeft
      let scrollWidth = scrollEl.scrollWidth
      let scrollElWidth = scrollEl.getBoundingClientRect().width

      let position = scrollWidth - scrollElWidth

      let left = 0

      if (scrollLeft + p < 0) {
        left = 0
      } else if (scrollLeft + p > position) {
        left = position
      } else {
        left = scrollLeft + p
      }

      this.$refs.scrollEl.scroll({
        top: 0,
        left: left,
        behavior: 'smooth' //滚动条平滑滚动
      })
    }
  },
  mounted() {
    this.handleControl()
  }
}
</script>

<style scoped lang="scss">
.field-config-container-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .field-config-content-wrap {
    position: relative;
    display: flex;
    align-items: center;

    overflow-x: scroll;
    overflow-y: hidden;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0 !important;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 0 !important;
    }
  }

  .full {
    width: 100%;
  }

  .half {
    width: calc(100% - 32px);
  }

  .arrow {
    width: 12px;
    height: 20px;
    line-height: 20px;
    background-color: #ddd;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      font-size: 12px;
      color: #606266;
    }
  }

  .left-arrow {
    left: 0;
    margin-right: 4px;
  }

  .right-arrow {
    right: 0;
    margin-left: 4px;

    transform: rotate(180deg);
  }
}
</style>
